<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="url" :where="where" height="calc(90vh - 315px)">
        <template slot="index" slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <el-link v-if="permission.includes('sys:customer:edit')" :underline="false" type="primary"
                   @click="toDetail(row.id)">
            详情
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!--详情-->
    <el-dialog :destroy-on-close="true" :lock-scroll="false" title="签到详情" :visible.sync="visible" width="750px" >
      <el-row>
        <el-col :span="3">工作时长</el-col>
        <el-col :span="20">{{info.work_time}}</el-col>
      </el-row>

      <el-row>
        <el-col :span="3" ><h6>签到信息</h6></el-col>
      </el-row>
      <el-row>
        <el-col :span="3">签到时间：</el-col>
        <el-col :span="20">{{info.checkin_time}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="3">签到地址：</el-col>
        <el-col :span="20">{{info.checkin_address}}</el-col>
      </el-row>
      <el-row style="height: 120px">
        <el-col :span="3">签到图证：</el-col>
        <el-col :span="20">
          <CustomImage :src="info.checkin_img_url" style="width: 100px;height: 100px"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3"><h6>签退信息</h6></el-col>
      </el-row>
      <el-row>
        <el-col :span="3">签退时间</el-col>
        <el-col :span="20">{{info.checkout_time}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="3">签退地址</el-col>
        <el-col :span="20">{{info.checkout_address}}</el-col>
      </el-row>
      <el-row style="height: 120px">
        <el-col :span="3">签退图证：</el-col>
        <el-col :span="20">
          <CustomImage :src="info.checkout_img_url" style="width: 100px;height: 100px"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">关联工单</el-col>
      </el-row>
      <div v-for="item in info.work_order_list" :key="item.id" @click="toWorkDetail(item.id)" style="color: #005EDF;cursor: pointer;margin-top: 10px">
        {{item.wo_number}}
      </div>

      <div slot="footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import CustomImage from '@/components/CustomImage.vue'

export default {
  props:['id'],
  components: {
    CustomImage
  },
  name: 'SystemLevel',
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表格数据接口
      url: `/attendance/work_order/${this.id}`,
      // 表格列配置
      columns: [
        {
          slot: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          fixed: "left",
          emptyText: '暂无',

        },
        {
          prop: 'name',
          label: '姓名',
          width: 200,
          align: 'center',
          showOverflowTooltip: true,
          emptyText: '暂无',
        },
        {
          prop: 'checkin_time',
          label: '签到时间',
          showOverflowTooltip: true,
          minWidth: 200,
          emptyText: '暂无',
          align: 'center',
        },
        {
          prop: 'checkout_time',
          label: '签退时间',
          align: 'center',
          width: 200,
          resizable: false,
          emptyText: '暂无',
        },
        {
          prop: 'rel_checkout_time',
          label: '实际签退时间',
          align: 'center',
          showOverflowTooltip: true,
          width: 200,
          emptyText: '暂无',
        },
        {
          prop: 'checkin_address',
          label: '签到地址',
          showOverflowTooltip: true,
          minWidth: 250,
          align: 'center',
        },
        {
          prop: 'work_time',
          label: '工作时长',
          align: 'center',
          showOverflowTooltip: true,
          emptyText: '暂无',
          width: 150
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          emptyText: '暂无',
          fixed: "right"
        },
      ],
      // 表格搜索条件
      where: {},
      /*详情*/
      visible: false,
      /*图片*/
      info: {},
    };
  },
  methods: {
    /*跳转到工单详情*/
    toWorkDetail(id){
      this.visible=false
      if(this.id!==id){
        this.$router.push('/workTickets/workTickets/info?id=' + id)
        this.$emit('done',id)
      }
    },
    /*关闭详情页面*/
    close() {
      this.visible = false
    },
    //进入详情页面
    toDetail(id) {
      this.$http.get(`/attendance/${id}`).then(res => {
        if (res.data.code === 0) {
          this.info=res.data.data
          this.$forceUpdate()
          setTimeout(()=>{
            this.visible = true
          },)
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
      this.visible = true
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.current = {}
      this.where = {};
      this.reload();
    },

  }
}
</script>

<style scoped>
.date /deep/ .el-input {
  width: 100%;
}

.el-row {
  height: 36px;
}
</style>
